<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .txt {
            color: rgb(117, 56, 56);
            font-size: 3em;
            text-align: center;
        }
        
        .thep {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="txt">
        <strong><em>大标题</em></strong>
    </div>
    <p id="p1" class="thep">
        这是第一行
    </p>
    <p id="p2" style="text-align: center;">
        这是第二行
    </p>

    <script>
        let p1 = document.getElementById("p1")
        console.log(p1)

        let divs = document.getElementsByClassName("txt")
        console.log(divs)

        let ps = document.getElementsByTagName("p")
        console.log(ps)

        p1.innerHTML = "这是第一行<p><em>然后我用innerHTML加了点文字</em></p>"
        p2.innerText = "这是第二行然后我用innerText加了点文字"

        let newP = document.createElement("p")
        newP.innerText = "这是我新增的p标签"
        newP.className = "thep"

        ps[0].appendChild(newP)
    </script>
</body>

</html>